<!DOCTYPE html>
<html>
<!--
  Created using jsbin.com
  Source can be edited via http://jsbin.com/orohe4/1/edit
-->
<head>
  <!-- 
  by Michal Budzynski
  http://michalbe.blogspot.com
  http://twitter.com/michalbe
  -->
    <title>Mini Game Test</title>
  <style>
    body {
      margin:0px;
      padding:0px;
      text-align:center;
    }
    
    canvas{
      outline:0;
      border:1px solid #000;
      margin-left: auto;
      margin-right: auto;
    }
	
	*{cursor: none;}
  </style>

<style id="jsbin-css">

</style>
</head>
<body>
<canvas id='c'></canvas>
<script src="game.js"></script>
<script>
var width = 320, 
  height = 500,
  gLoop,
  c = document.getElementById('c'), 
  ctx = c.getContext('2d');
      
  c.width = width;
  c.height = height;

var mouseX = 0;
var mouseY = 0;

c.addEventListener("mousemove",mouseEventHandler, false);
c.addEventListener('click', mouseClickHandler, false);

var clear = function(){
  ctx.fillStyle = '#000000';
  ctx.clearRect(0, 0, width, height);
  ctx.beginPath();
  ctx.rect(0, 0, width, height);
  ctx.closePath();
  ctx.fill();
}

var howManyCircles = 10, circles = [];
var bulletCount = 0, bullets = [];

for (var i = 0; i < howManyCircles; i++) 
  circles.push([Math.random() * width, Math.random() * height, Math.random() * 100, Math.random() / 2]);
  
 var addBullet = function(num){
		bullets[num] = [player.getX(), player.getY(), 5, 1];	
}

var DrawCircles = function(){
  for (var i = 0; i < howManyCircles; i++) {
    ctx.fillStyle = 'rgba(255, 0, 0, ' + circles[i][3] + ')';
    ctx.beginPath();
    ctx.arc(circles[i][0], circles[i][1], circles[i][2], 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }

};

var DrawBullets = function(){
  for (var i = 0; i < bulletCount; i++) {
    ctx.fillStyle = 'rgba(0, 0, 255, ' + bullets[i][3] + ')';
    ctx.beginPath();
    ctx.arc(bullets[i][0], bullets[i][1], bullets[i][2], 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
  }

}

var MoveCircles = function(e){
  for (var i = 0; i < howManyCircles; i++) {
    if (circles[i][1] - circles[i][2] > height) {
      circles[i][0] = Math.random() * width;
      circles[i][2] = Math.random() * 100;
      circles[i][1] = 0 - circles[i][2];
      circles[i][3] = Math.random() / 2;
    }
    else {
      circles[i][1] += e;
    }
  }
};

var MoveBullets = function(e){
  for (var i = 0; i < bulletCount; i++) {
	if(bullets[i][1] - bullets[i][2] > 0){
      bullets[i][1] -= e;
	 }
	 else{
		bullets[i][3] = 0;
	 }
  }
}

var player = new (function(){
  var that = this;
  that.image = new Image();

  that.image.src = "kidneyCape2.png"
  that.width = 33;
  that.height = 45;
  that.frames = 1;
  that.actualFrame = 0;
  that.X = 0;
  that.Y = 0;  
  
  that.setPosition = function(x, y){
    that.X = x;
    that.Y = y;
  }
  
  that.getX = function(){
	return that.X;
  }
  
  that.getY = function(){
	return that.Y;
  }
  
  that.interval = 0;
  that.draw = function(){
    try {
      ctx.drawImage(that.image, 0, that.height * that.actualFrame, that.width, that.height, that.X, that.Y, that.width, that.height);
    } 
    catch (e) {
    };
    
    if (that.interval == 4 ) {
      if (that.actualFrame == that.frames) {
        that.actualFrame = 0;
      }
      else {
        that.actualFrame++;
      }
      that.interval = 0;
    }
    that.interval++;    
  }
})();


player.setPosition(~~((width-player.width)/2), ~~((height - player.height)/2));

function person(type)
{
this.type = type;
this.image = new Image();

if(this.type ==0){
	this.image.src = "badGuy.png"
} 

   this.width = 33;
   this.height = 44;
   this.frames = 1;
   this.actualFrame = 0;
   this.X = Math.random()*width;
   this.Y = 0; 
   this.interval = 0;   
   
   this.draw = function(){
    try {
      ctx.drawImage(this.image, 0, this.height * this.actualFrame, this.width, this.height, this.X, this.Y, this.width, this.height);
    } 
    catch (e) {
	}
    };
	
	this.setPosition = function(x, y){
       this.X = x;
       this.Y = y;
  }
  
   this.incrementPosition = function(e){
      this.Y = this.Y+e;
	  if(this.Y > height){
		this.Y = 0;
		this.X = Math.random()*(width-20);
	  }
	  
   }
    
  
  }


var bg = new person(0);

  
var GameLoop = function(){
  clear();
  
  MoveCircles(5);
  DrawCircles();
  if(bulletCount>0){
     MoveBullets(10);
     DrawBullets();
  }
  
  player.draw();
  bg.incrementPosition(1);
  bg.draw();
  gLoop = setTimeout(GameLoop, 1000 / 50);
}
function mouseEventHandler(event)
{
	mouseX = event.pageX - c.offsetLeft;
	mouseY = event.pageY - c.offsetTop;
	player.setPosition(mouseX-player.width/2, mouseY);
}

function mouseClickHandler(event)
{
	if(bulletCount<3){
		bulletCount +=1;
		addBullet(bulletCount-1);
	}
	else{
		bulletCount = 1;
		addBullet(0);
	}
	
}

GameLoop();
</script>
<script src="http://static.jsbin.com/js/render/edit.js"></script>
<script>jsbinShowEdit({"root":"http://static.jsbin.com","csrf":"GX/u62BBECCLPnDYfa6eSpd+"});</script>
<script src="http://static.jsbin.com/js/vendor/eventsource.js"></script>
<script src="http://static.jsbin.com/js/spike.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1656750-13']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();

</script>

</body>
</html>